<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>吸毒人员信息采集系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./../layui/css/layui.css" tppabs="./../layui/css/layui.css"  media="all">

  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <ul class="layui-nav" lay-filter="" style="position: sticky;top: 0px;z-index:100">
      <li class="layui-nav-item layui-this"><a href="/index/1">展示区</a></li>
      <li class="layui-nav-item"><a href="/search_someone">查询区</a></li>
      <li class="layui-nav-item"><a href="/info_insert">采集区</a></li>
      <li class="layui-nav-item"><a href="/info_update">修改区</a></li>
      <li class="layui-nav-item"><a href="/analyse">分析区</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">退出系统</a>
        <dl class="layui-nav-child">
          <dd><a href="/exit">确认退出</a></dd>
        </dl>
      </li>
    </ul>
    <table class="layui-table" style="margin:0 0;text-align:center;background: linear-gradient(to right, #10a37f, #5ca0a3);color: black;">
    <thead style="background-color: #ffffff;">
        <tr style="position: sticky;top: 8%;background-color:#888;z-index:50;color:white;margin:0" >
          <th lay-data="{field:'user_id', width:80, sort: true}" style="text-align:center;">ID</th>
          <th lay-data="{field:'name', width:80}" style="text-align:center;">姓名</th>
          <th lay-data="{field:'gender', width:80, sort: true}" style="text-align:center;">性别</th>
          <th lay-data="{field:'age', sort: true}" style="text-align:center;">年龄</th>
          <th lay-data="{field:'birthdate'}" style="text-align:center;">出生日期</th>
          <th lay-data="{field:'id_number'}" style="text-align:center;">身份证号码</th>
          <th lay-data="{field:'contact_info'}" style="text-align:center;">联系方式</th>
          <th lay-data="{field:'education_background'}" style="text-align:center;">教育背景</th>
          <th lay-data="{field:'occupation'}" style="text-align:center;">工作</th>
          <th lay-data="{field:'economic_status'}" style="text-align:center;">经济状况</th>
        </tr>
      </thead>

        {% for i in result %}
         <tr>
          <td>{{i[0]|safe}}</td>
          <td>{{i[1]|safe}}</td>
        {% if i[2]-1 == 0 %}
             <td>{{"男"|safe}}</td>
        {% else %}
            <td>{{"女"|safe}}</td>
        {% endif %}

          <td>{{i[3]|safe}}</td>
          <td>{{i[4]|safe}}</td>
          <td>{{i[5]|safe}}</td>
          <td>{{i[6]|safe}}</td>
          <td>{{i[7]|safe}}</td>
          <td>{{i[8]|safe}}</td>
          <td>{{i[10]|safe}}</td>
        </tr>
        {% endfor %}
    </table>

    <div id="next"></div>

<script src="./../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('laypage', function(){
      var laypage = layui.laypage;
      //执行一个laypage实例
      laypage.render({
        elem: 'next', //注意，这里的 test1 是 ID，不用加 # 号
        groups: 25,
        limit: 15,
        curr: {{page|safe}},
        count:  {{count|safe}}, //数据总数，从服务端得到
        jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。


            //首次不执行
            if(!first){
              //do something
              window.location = "./"+obj.curr;
            }
          }
      });
    });

</script>

</body>
</html>